<template>
  <div class="wp">
    <div class="login">
      <div class="ll nones" :class="open?'nones_1':''">
        <img src="@/assets/yxlogo.png" class="ll-logo" />
        <h3 class="ll-tit">打造企业智能制造 公共产业服务平台</h3>
        <p class="ll-p1">欢迎回来！请登录您的账号</p>
        <h1 class="l-input" :class="isnone2?'colors':''" @click="a1">
          邮箱
          <el-input v-model="input" placeholder="请输入您的邮箱"></el-input>
        </h1>
        <h1 class="l-input" :class="isnone1?'colors':''" @click="a2">
          密码
          <el-input v-model="input1" placeholder="请输入您的密码" show-password ></el-input>
        </h1>
         <el-checkbox v-model="checked">记住密码</el-checkbox>
         <el-link  target="_blank" class="ll-mm" :underline="false">忘记密码？</el-link>
        <el-row>          
          <el-button class="ll-btn">登录</el-button>
          <el-link  target="_blank" class="ll-zc" :underline="false" @click="b1">还没有账号？立即注册</el-link>
        </el-row>
        <div class="logintree">
          <h4>使用第三方登录</h4>
          <div class="ll-icon">
              <i slot="icon" class="iconfont icon-weixin"></i>
              <i slot="icon" class="iconfont icon-BILIBILI_LOGO"></i>
              <i slot="icon" class="iconfont icon-toutiaoyangshi"></i>
              <i slot="icon" class="iconfont icon-douyin"></i>
          </div>
        </div>
      </div>
      <div class="ll reg nones" :class="open_2?'nones_1':''">
        <img src="@/assets/yxlogo.png" class="ll-logo" />
        <h3 class="ll-tit">打造企业智能制造 公共产业服务平台</h3>
        <p class="ll-p1">欢迎你！</p>
        <h1 class="l-input" :class="isnone2?'colors':''" @click="a1">
          邮箱
          <el-input v-model="input" placeholder="请输入您的邮箱"></el-input>
        </h1>
        <h1 class="l-input" :class="isnone1?'colors':''" @click="a2">
          密码
          <el-input v-model="input3" placeholder="请输入您的密码" show-password></el-input>
        </h1>
        <h1 class="l-input" :class="isnone3?'colors':''" @click="a3">
          确认密码
          <el-input v-model="input4" placeholder="请输入您的密码" show-password></el-input>
        </h1>
         <el-checkbox v-model="checked">我已阅读并同意<el-link type="danger" :underline="false">《宇喜科技协议》</el-link></el-checkbox>
        <el-row>          
          <el-button class="ll-btn2" @click="b2">注册</el-button>
        </el-row>
        <div class="logintree">
          <h4>使用第三方注册</h4>
          <div class="ll-icon">
              <i slot="icon" class="iconfont icon-weixin"></i>
              <i slot="icon" class="iconfont icon-BILIBILI_LOGO"></i>
              <i slot="icon" class="iconfont icon-toutiaoyangshi"></i>
              <i slot="icon" class="iconfont icon-douyin"></i>
          </div>
        </div>
      </div>
      <div class="lr">
        <img src="@/assets/3D.png" class="lr-bgi" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      input: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      isnone1:false,
      isnone2:true,
      isnone3:false,
      checked: false,
      open:false,
      open_2:true
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
     a1(){
        this.isnone1 = false
        this.isnone2 = true
        this.isnone3 = false
     },
     a2(){
        this.isnone1 = true
        this.isnone2 = false
        this.isnone3 = false
     },
     a3(){
        this.isnone1 = false
        this.isnone2 = false
        this.isnone3 = true
     },
     b1(){
        this.open = false
        this.open_2 = true
     },
     b2(){
        this.open = true
        this.open_2 = false
     }
     
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang='less'>
.nones{
  display: none;
}
.nones_1{
  display: block;
}
.wp {
  position: relative;
  height: 750px;
  background-color: #7f7f7f;
}
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 640px;
  background-color: #ffffff;
  .ll {
    padding-left: 40px;
    width: 460px;
    height: 100%;
    float: left;
    .ll-logo {
      padding-top: 60px;
    }
    .ll-tit {
      padding-top: 10px;
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
    .ll-p1 {
      padding-top: 10px;
      padding-bottom: 35px;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
    .l-input {
      margin: 0;
      padding-top: 6px;
      padding-left: 18px;
      margin-bottom: 10px;
      width: 402px;
      height: 50px;
      background-color: #ffffff;
      border: solid 1px #dddddd;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #999999;
    }
    .el-input__inner{
      padding: 0;
      height: 24px;
      margin-top: 2px;
      border: none;
      color: #da251d;
    }
    .colors {
      border-left: 1px solid #da251d;
   }
    .el-checkbox{
    color: #333;
   }
   .ll-mm{
     float: right;
     color: #333333;
     margin-top: 2px;
     margin-right: 33px;
   }
   .ll-btn{
    border-radius: 0%;
    color: #ffffff;
    margin-top: 40px;
    margin-bottom: 50px;
    margin-right: 16px;
    font-size: 18px ;
    width: 144px;
    height: 48px;
    background-color: #da251d;
    border: none;
    outline: none;
   }
    .ll-btn2{
    border-radius: 0%;
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 15px;
    margin-right: 16px;
    font-size: 18px ;
    width: 144px;
    height: 48px;
    background-color: #da251d;
    border: none;
    outline: none;
   }
   .ll-zc{
     color: #da251d;
   }
   .ll-icon{
     margin: 0;
     width: 210px;
     margin-top:20px;
     .iconfont{
       float: left;
       display: block;
       color: #bebebe;
       margin-right:10px;
     }
     .iconfont:hover{
       color: #da251d;
      border: solid 2px #da251d;       
     }
   }
   .icon-weixin{
      font-size: 20px;
      border: solid 2px #bebebe;
      border-radius: 50%;
      padding: 6px 7px;
   }
   .icon-douyin{
      font-size: 20px;
      border: solid 2px #bebebe;
      border-radius: 50%;
      padding: 6px 7px;
   }
   .icon-toutiaoyangshi{
      font-size: 16px;
      border: solid 2px #bebebe;
      border-radius: 50%;
      padding: 7.5px 8.5px;
   }
    .icon-BILIBILI_LOGO{

      font-size: 8px;
      border: solid 2px #bebebe;
      border-radius: 50%;
      padding: 10px 3px;
   }
  }
}
</style>
